<template>
  <div class="siyuIndex">
    <!-- <FrameTop /> -->
    <div class="siyuGif">
      <!-- <img src="@/assets/newimg/indexSyquan.png"> -->
      <img src="@/assets/newimg/bgcircle.png">
    </div>
    <div class="centerIndexSiyu">
      <div class="cenMap">
        <div v-for="(item, index) in basinlist" @click="pushIndexClick(item.wswscd, item.wsnm)"
          :style="{ top: item.top, left: item.left }">
          {{ item.wsnm }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import FrameTop from '../main/frameTop'
export default {
  components: {
    FrameTop
  },
  computed: {
    // 流域编码
    basin() {
      return this.$store.getters.basin
    },
    basinlist() {
      return this.$store.getters.basinlist
    }
  },
  created() {
    var _this = this;
    this.$store.dispatch('basinName', this.value)
    // a2.init({
    //   appId: '2d3eacd0-3deb-4b8b-b36e-b61d3d79f8d7',
    //   patterns: [/as\.zaiyaa\.com/]
    // });

    // a2.on('auth', () => {
    //   a2.openLoginPage({ style: 2, zIndex: 55 });
    // });

    // a2.on('login-page', ({ code, data }) => {

    //   if (code === 0) {
    //     console.log( data);
    //   }
    //   else if (code === 1) { /* 用户关闭了登录页 */ }
    // });
  },
  methods: {
    pushIndexClick(val, name) {
      // console.log(val)
      // console.log(name)
      this.$store.dispatch('basin', val)
      this.$store.dispatch('basinName', name)
      this.$router.push({ path: '/IndexMain' })
    }
  }
}
</script>
<style lang="less">
.siyuIndex {
  width: 100%;
  height: 100vh;
  background: url(~@/assets/newimg/newBackgroud.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  overflow-y: hidden;

  .siyuGif {
    width: 850px;
    height: 850px;
    position: absolute;
    top: calc(50% - 425px);
    left: calc(50% - 520px);
    animation: spin 10s ease-in-out infinite;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .centerIndexSiyu {
    //width: 900px;
    //height: 650px;
    width: 1098px;
    height: 733px;

    background: url(~@/assets/newimg/indexMap.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    //top: calc(50% - 290px);
    //left: calc(50% - 433px);
    top: calc(50% - 339px);
    left: calc(50% - 589px);

    .cenMap {
      position: absolute;
      top: 30%;
      left: 50%;

      >div {
        position: relative;
        cursor: pointer;
        width: 118px;
        height: 78px;
        padding-top: 6px;
        padding-left: 10px;
        text-indent: 10px;
        text-align: center;
        font-weight: 700;
        font-size: 14px;

        &:nth-child(1) {
          top: -50px;
          left: -160px;
        }

        &:nth-child(2) {
          top: -50px;
          left: -220px;
        }

        &:nth-child(3) {
          top: -190px;
          left: 80px;
        }

        &:nth-child(4) {
          top: -160px;
          left: 130px;
        }

        &:hover {
          background: url(~@/assets/newimg/indexSyHover.png) no-repeat top center;
          background-size: 100% 100%;
        }

        span {
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #274fb3;
          border: 2px solid rgba(rgba(255, 255, 255, 0.5));
        }
      }
    }
  }
}

@keyframes turn {
  0% {
    transform: rotateX(50deg) rotate(0deg);
  }

  50% {
    transform: rotateX(50deg) rotate(180deg);
  }

  100% {
    transform: rotateX(50deg) rotate(360deg);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
